<template>

  <div class="vanta_area"
       ref="Area"
       style="height: 100vh ;width: 100vw">
    <el-scrollbar>
      <div v-if = "currentUserRole==='admin'"
           style="display: flex;justify-content: flex-end">
        <el-affix :offset="10">
          <div>
            <el-button v-if="currentArticleTopOrNot === 0"
                       type="primary"
                       color="#000080"
                       @click="setTop">置顶</el-button>
            <el-button v-else
                       type="primary"
                       color="#000080"
                       @click="cancelTop">取消置顶</el-button>
          </div>

          <div style="margin-top: 1vh">
            <el-button v-if="currentArticleEliteOrNot === 0"
                       type="primary"
                       color="#ffd700"
                       @click="setElite">加精</el-button>
            <el-button v-else
                       type="primary"
                       color="#ffd700"
                       @click="cancelElite">取消加精</el-button>
          </div>

          <el-button style="margin-top: 1vh"
                     type="primary"
                     color="#DC143C"
                     @click="setDelete"
                     v-loading.fullscreen.lock="deleteFullscreenLoading">删除</el-button>
        </el-affix>
      </div>


      <div class="common-layout" style="padding-left: 5%">
        <el-container>
          <el-header style="min-height: 10vh;margin-top: 5vh">
            <div v-if = "currentUserUid === uid" style="display: flex;justify-content: flex-end">
            </div>
            <div style="display: flex; flex-direction: column">
              <el-text style="font-size: xx-large">
                {{title}}
              </el-text>
            </div>
            <el-affix :offset="10">
              <el-button v-if="helpMoney ===0 && uid===currentUserUid"
                         color="#FFD700" @click = "setHelpMoney">
                悬赏
              </el-button>
            </el-affix>
          </el-header>

          <el-main>
            <div class="common-layout">
              <el-divider content-position="center"  style="opacity: 0.6">文章</el-divider>
              <el-container>
                <el-aside width="20vw">
                  <div style=" border: 1px solid #000;
                   min-height: 50vh;
                   background: #ffffff;
                   opacity: 0.8">
                    <ArticleAuthorCard
                        :uid = "uid"
                        :create-time = "createTime"
                        :user-role = "userRole"
                    />
                  </div>

                </el-aside>

                <el-main>
                  <div style=" border: 1px solid #000;
                   min-height: 50vh;
                   padding: 15px;
                   background: #ffffff;
                   opacity: 0.9">
                    <div v-if = "editorType===1">
                      <v-md-preview :text="markdownContent">

                      </v-md-preview>
                    </div>
                    <div v-else>
                      <el-text style="font-size: medium">
                        {{content}}
                      </el-text>
                    </div>
                    <div style="margin-top: 1vh">
                      <el-text> 发送时间{{ postTime}}</el-text>
                    </div>
                    <div>
                      <el-divider content-position="left">
                        签名
                      </el-divider>
                      <div>
                        <el-text v-if="userProfile==null">
                          这个人很懒，还没有写简介喔
                        </el-text>
                        <el-text v-else>
                          {{userProfile}}
                        </el-text>
                      </div>
                    </div>
                  </div>

                </el-main>
              </el-container>
            </div>

            <div style="margin-top: 3vh">
              <el-divider content-position="center"
                          style="background: #ffffff;
                          opacity: 0.6">评论</el-divider>
            </div>


            <CommentCard
                v-for="(item,index) in commentDataList"
                :key="index"
                :uid="item.uid"
                :content="item.content"
                :postTime="item.postTime"
                :helpMoney="helpMoney"
                :authorUid = "uid"
                :currentUserUid = "currentUserUid"
                :currentArticleId = 'articleId'
                style="margin-left: 3vw">
            </CommentCard>

          </el-main>

          <el-footer style="margin-top: 3vh">
            <el-divider content-position="left"
                        style="background: #ffffff;
                        opacity: 0.6">回复此帖</el-divider>
            <el-form-item style="padding-left: 5vw">
              <el-input type="textarea" v-model="editComment" :rows="10" size="default" placeholder="请输入正文"></el-input>
            </el-form-item>
            <el-form-item style="display: flex; flex-direction: column; align-items: flex-end">
              <el-button type="primary"
                         @click="dialogVisible = true"
                         v-loading.fullscreen.lock="fullscreenLoading">发表</el-button>
            </el-form-item>
          </el-footer>
        </el-container>
      </div>

      <el-dialog
          v-model="dialogVisible"
          title="注意！"
          width="30%"
          align-center
          :before-close="handleClose"
      >
        <span>发送评论？</span>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="postComment">
          确认
        </el-button>
      </span>
        </template>
      </el-dialog>


    </el-scrollbar>

  </div>




</template>

<script setup>
import {useRoute} from "vue-router";
import {getWithToken, postWithToken} from "@/net/postAndGetMethodWithToken";
import {ref} from "vue";
import ArticleAuthorCard from "@/components/article/ArticleAuthorCard.vue";
import CommentCard from "@/components/article/CommentCard.vue";
import {ElMessage, ElMessageBox, ElNotification} from "element-plus";
import router from "@/router";

const route = useRoute()
const articleId = route.query.articleId

const markdownContent = ref()
const content = ref()
const title = ref()
const editorType = ref()
const postTime = ref()

const uid =  ref()
const userName =  ref()
const userAvatar =  ref()
const userProfile =  ref()
const userRole =  ref()
const createTime = ref()

const currentArticleTopOrNot = ref()
const currentArticleEliteOrNot = ref()
const helpMoney = ref()
getWithToken('/api/article/?articleId='+articleId,
    (data,code,message) =>{
      editorType.value = data.editorType
      title.value = data.title
      content.value = data.content
      markdownContent.value =  data.markdownContent
      postTime.value = data.postTime

      uid.value = data.user.uid
      userName.value = data.user.userName
      userAvatar.value = data.user.userAvatar
      userProfile.value = data.user.userProfile
      userRole.value = data.user.userRole
      createTime.value = data.user.createTime
      currentArticleTopOrNot.value = data.top
      currentArticleEliteOrNot.value =data.elite

      helpMoney.value = data.help

})



const editComment =ref(null)
const fullscreenLoading = ref(false)
const dialogVisible = ref(false)

const handleClose = () => {
  ElMessageBox.confirm('取消评论？','提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
  }).then(() => {
        dialogVisible.value = false
      })
      .catch(() => {
        // catch error
      })
}
const postComment  = () =>{
  if( editComment.value ===null){
    ElMessage.warning("评论不能为空")
    dialogVisible.value = false
  }else{
    postWithToken('/api/comment/add',JSON.stringify(({
      articleId: articleId,
      context: editComment.value
    })),(code,data,message) => {
      ElMessage.success('发送成功！')
      fullscreenLoading.value = true
      dialogVisible.value = false
      setTimeout(() => {
        fullscreenLoading.value = false
        location.reload()
      }, 2000)
    },(data,code,message) => {
      if(code === 40300){
        ElMessage.warning(message)
        dialogVisible.value = false
      }else if(code === 40100){
        ElMessage.warning("请先登录")
        dialogVisible.value = false
        router.push('/welcome')
      }
    })
  }
}

const commentDataList = ref([])
getWithToken(`/api/comment/get/?articleId=${articleId}`
    ,(data,code,message) =>{
      commentDataList.value = data
    })


const currentUserRole = ref()
const currentUserUid = ref()
getWithToken('/api/user/info',(data,code,message)=>{
  currentUserRole.value = data.userRole
  currentUserUid.value = data.uid
},() =>{
  console.log("未登录")
})


const setTop = () =>{
  getWithToken('/api/article/addTop?articleId='+articleId,
      (data,code,message) =>{
        ElNotification({
          title: '成功',
          message: '置顶成功',
          type: 'success',
        })
        location.reload()
  })
}


const cancelTop = () =>{
  getWithToken('/api/article/deleteTop?articleId='+articleId,
      (data,code,message) =>{
        ElNotification({
          title: '成功',
          message: '设置取消置顶成功',
          type: 'success',
        })
        location.reload()
      })
}

const setElite = () =>{
  getWithToken('/api/article/addElite?articleId='+articleId,
      (data,code,message) =>{
        ElNotification({
          title: '成功',
          message: '设置精华成功',
          type: 'success',
        })
        location.reload()
      })
}

const cancelElite = () =>{
  getWithToken('/api/article/deleteElite?articleId='+articleId,
      (data,code,message) =>{
        ElNotification({
          title: '成功',
          message: '取消精华成功',
          type: 'success',
        })
        location.reload()
      })
}

const deleteFullscreenLoading = ref(false)
const setDelete = () =>{

  getWithToken('/api/article/delete?articleId=' + articleId,
      (data, code, message) => {
        ElNotification({
          title: '成功',
          message: '删除成功',
          type: 'success',
        })
        deleteFullscreenLoading.value = true
        setTimeout(
            ()=>{
              window.close()
            },2000
        )
      })
}


import * as THREE from 'three'
import CLOUDS  from 'vanta/dist/vanta.clouds.min'
import {onMounted,onBeforeUnmount} from 'vue'

//使用ref引用挂载区域
const Area=ref(null)
//创建一个全局的变量来使用vanta.js
/**
 *因为在vue2中，是使用this.vantaEffect来创建指定的3d动画模板的
 *但是vue3 setup中是没有this，所以要另外创建一个
 **/
let vantaEffect=null;
//在两个生命周期钩子内创建vantaEffect
onMounted(()=>{
  vantaEffect=CLOUDS({
    el:Area.value,
    THREE:THREE,
    mouseControls: true,
    touchControls: true,
    gyroControls: false,
  })
})

onBeforeUnmount(()=>{
  if(vantaEffect){
    vantaEffect.destroy()
  }
})

const setMoney = ref("10")
const setHelpMoney = () =>{
  postWithToken(`/api/reward/add?articleId=${articleId}&money=${setMoney.value}`,null,
      (data,code,message) =>{
    ElMessage.success("设置成功")
        location.reload()
  },() =>{ return false})
}
</script>
